<template>
  <div>
    <el-card shadow="never">
      <header-title title="追溯信息查询"></header-title>
    </el-card>
    <el-card shadow="never">
      选择追溯日期：
      <el-date-picker
        size="small" style="margin: 0 0 20px 0;"
        @change="changePurchaseDateValue"
        v-model="purchaseDateValue"
        :picker-options="pickerOptionsdate"
        type="date"
        placeholder="选择日">
      </el-date-picker>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="猪肉" name="first">
        </el-tab-pane>
        <el-tab-pane label="牛羊肉" name="second">
        </el-tab-pane>
        <el-tab-pane label="豆制品" name="third">
        </el-tab-pane>
        <el-tab-pane label="禽类" name="fourth">
        </el-tab-pane>
        <el-tab-pane label="蛋类" name="five">
        </el-tab-pane>
        <el-tab-pane label="蔬菜" name="six">
        </el-tab-pane>
      </el-tabs>
      <div style="margin: 20px 0;">
            <header-title title="商户列表"></header-title>
            <el-table :data="meatData" v-loading="loading" style="width: 100%;margin: 15px 0 25px;">
              <el-table-column prop="name" label="商户名称"></el-table-column>
              <el-table-column prop="stallName" label="摊位名称"></el-table-column>
              <el-table-column label="操作" width="350">
                <template slot-scope="scope">
                  <el-button @click="showProducts(scope.row)" type="text" >查看销售商品</el-button>
                </template>
              </el-table-column>
              <div slot="empty"><img src="../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
            </el-table>
            <el-pagination
              :page-size="meatPage.perPage"
              :current-page="meatPage.page"
              :total="meatPage.total"
              @current-change="changeMeatPage"
              style="margin-top: 15px;"
              background
              layout="prev, pager, next"
            ></el-pagination>
          </div>
    </el-card>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import CountUp from '@/components/CountUp/index'
import CardItem from '@/components/CardItem/index.vue'
import MySelect from "@/components/MySelect"
import { formatDate, formatDate2, isNil } from '@/utils'
export default {
  name: 'PurchaseInfo',
  components: {
     HeaderTitle,
     CountUp,
     CardItem,
     MySelect
  },
  data(){
    return {
      purchaseDateValue: formatDate(new Date()), // 选择购进日期 日
      // 选择日 的限制
      pickerOptionsdate: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },

      meatData: [],
      meatPage: {
        perPage: 10, // 每页显示10条
        page: 1, // 当前页
        total: 0
      },

      loading: true,
      activeName: 'first',
      businessType: 1,
      businessTypeName: '猪肉',
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      this.getMeatList(this.purchaseDateValue, this.businessType,this.meatPage.perPage,this.meatPage.page)
    }
  },
  mounted(){
    this.getMeatList(this.purchaseDateValue, this.businessType,this.meatPage.perPage,this.meatPage.page)
  },
  methods:{
    defaultValue (value, defaultValue) {
      if (isNil(value)) {
        return defaultValue
      }
      return value
    },
    // 改变日期
    changePurchaseDateValue(date){
      const newDate = formatDate2(date)
      if(this.showText(newDate) === 2){
        this.curDate = 2 // 当天
      }else if(this.showText(newDate) === 1){
        this.curDate = 1 // 前五天
      }else if(this.showText(newDate) === 3){
        this.curDate = 3 // 超过五天
      }
      this.purchaseDateValue = formatDate(date)
      this.meatModal.date = this.purchaseDateValue
      this.getMeatList(formatDate(date), this.businessType,this.meatPage.perPage,this.meatPage.page)
    },
    handleSuccess(res, file, fileList){
      this.meatModal.redTicket = 'http://cailanzi.image.cailanzi001.com/' + res.key
    },
    handleRemove(file, fileList) {
      console.log(file,fileList[0])
    },

    whiteSuccess(res, file, fileList){
      this.meatModal.whiteTicket = 'http://cailanzi.image.cailanzi001.com/' + res.key
    },
    // 所有Meat列表
    getMeatList(date,businessType,perPage,page){
      this.$store.dispatch('purchaseInfo/fetchMeatList',{date,businessType, perPage, page}).then(
        data => {
          this.loading = false
          this.meatData = data.data.items
          this.meatPage.total = data.data.total
        }
      ).catch(err => {
        this.loading = false
        this.meatData = []
        this.meatPage.total = 0
      })
    },
    changeMeatPage(num){
      this.meatPage.page = num
      this.getMeatList(this.purchaseDateValue, this.businessType,this.meatPage.perPage,num)
    },
    handleClick(tab, event) {
      this.loading = true
      this.meatModal = {}
      this.productsPushArr = []
      if(tab.name === 'first'){
        this.meatPage.page = 1
        this.meatData = []
        this.businessType = 1
        if(this.businessType === 1){
          this.businessTypeName = '猪肉'
        }
        this.getMeatList(this.purchaseDateValue, this.businessType,this.meatPage.perPage,this.meatPage.page)
      }else if(tab.name === 'second'){
        this.meatPage.page = 1
        this.meatData = []
        this.businessType = 9
        if(this.businessType === 9){
          this.businessTypeName = '牛羊肉'
        }
        this.getMeatList(this.purchaseDateValue, this.businessType,this.meatPage.perPage,this.meatPage.page)
      }else if(tab.name === 'third'){
        this.meatPage.page = 1
        this.meatData = []
        this.businessType = 11
        if(this.businessType === 11){
          this.businessTypeName = '豆制品'
        }
        this.getMeatList(this.purchaseDateValue, this.businessType,this.meatPage.perPage,this.meatPage.page)
      }else if(tab.name === 'fourth'){
        this.meatPage.page = 1
        this.meatData = []
        this.businessType = 3
        if(this.businessType === 3){
          this.businessTypeName = '禽类'
        }
        this.getMeatList(this.purchaseDateValue, this.businessType,this.meatPage.perPage,this.meatPage.page)
      }else if(tab.name === 'five'){
        this.meatPage.page = 1
        this.meatData = []
        this.businessType = 10
        if(this.businessType === 10){
          this.businessTypeName = '蛋类'
        }
        this.getMeatList(this.purchaseDateValue, this.businessType,this.meatPage.perPage,this.meatPage.page)
      }
      else if(tab.name === 'six'){
        this.meatPage.page = 1
        this.meatData = []
        this.businessType = 0
        if(this.businessType === 0){
          this.businessTypeName = '蔬菜'
        }
        this.getMeatList(this.purchaseDateValue, this.businessType,this.meatPage.perPage,this.meatPage.page)
      }
    },
    // 缴费通知详情
    showProducts(row){
      console.log("row", row)
      const businessId = row.id
      this.$router.push({
        path: `products/${businessId}`,
        qyery: {
          row:row
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
#detail-dialog{
  .ptitle{
    color: #00CBE4;
    font-size: 16px;
  }
  .pnumber{
    margin: 15px 10px;
    font-size: 14px;
  }
  /deep/.el-dialog__body {
    padding: 0px 20px 30px;
    color: #606266;
    font-size: 14px;
  }
  /deep/.el-card__header {
    padding: 10px 20px 0;
    border-bottom: 1px solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
</style>
